<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="任务号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="cityName"
        label="城市"
        width="180">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="时间">
    </el-table-column>
    <el-table-column
        prop="address"
        label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.getTankHistory()
  },

  methods: {

    // 获取任务进度
    async getTankHistory() {
      await this.$store.dispatch("task/getTankHistory");
      console.log(this.tankHistory)
      this.tableData = this.tankHistory
    },

    //查看任务追踪详情页
    handleClick(row) {
      this.$router.push(`/track/detail/${row.id}`)
      console.log(row);
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    ...mapState("task",["tankHistory"])
  }

};
</script>
